<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>供暖号码</title>
</head>
<!--前后端分离必须导入的两个js开始-->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<!--前后端分离必须导入的两个js结束-->
<body>
<div id="app">
    <div>
        查找:<input id="sel" placeholder="关键字" type="text">
        <input value="供暖号码查询" type="button" @click="search">
        <input value="身份证号查询" type="button" @click="search1">
        <input value="户主名查询" type="button" @click="search2">
        <input value="地址查询" type="button" @click="search3">
        <input value="添加" type="button" @click="addHeatingNumber">
    </div>

    <!--显示添加或者修改输入框-->
    <div v-if="showAdd">
        <table>
            <tr>
                <td>
                    供暖号码的地址:
                    <select  v-model.trim="province"><option @click="provinces" v-for="province in provinces">{{province.title}}</option></select>
                    <select  v-model.trim="city"><option v-for="city in citys">{{city.title}}</option></select>
                    <input  v-model.trim="address"type="text">

                    <!--<input ref="address" v-model.trim="curHeatingNumber.address" type="text">-->
                    <span>{{error.address}}</span>
                </td>
            </tr>
            <tr>
                <td>
                    供暖号码:<input ref="number" v-model.trim="curHeatingNumber.number" type="text">
                    <span>{{error.number}}</span>
                </td>
            </tr>
            <tr>
                <td>
                    户主名:<input ref="householdName" v-model.trim="curHeatingNumber.householdName" type="text">
                    <span>{{error.householdName}}</span>
                </td>
            </tr>
            <tr>
                <td>
                    户主身份证号码:<input ref="householdIdcard" v-model.trim="curHeatingNumber.householdIdcard" type="text">
                    <span>{{error.householdIdcard}}</span>
                </td>
            </tr>
            <tr>
                <td>
                    <input value="提交" @click="save" type="button">
                    <input @click="backTab" value="返回" type="button">
                </td>
            </tr>

        </table>
    </div>

    <table border="1px" v-if="showTab">
        <tr>
            <td>序号</td>
            <td>供暖号码的地址</td>
            <td>供暖号码</td>
            <td>户主名</td>
            <td>户主身份证号</td>
            <td>添加时间</td>
            <td>更新时间</td>
            <td>操作</td>
        </tr>
        <tr v-for="heatingNumber,index in heatingNumbers">
            <td>{{index+1}}</td>
            <td>{{heatingNumber.address}}</td>
            <td>{{heatingNumber.number}}</td>
            <td>{{heatingNumber.householdName}}</td>
            <td>{{heatingNumber.householdIdcard}}</td>
            <!-- heatingNumber.inputTime+.substring(0,10)截取时间格式   例如:2021-05-13-->
            <td>{{heatingNumber.inputTime.substring(0,10)}}</td>
            <td>{{heatingNumber.updateTime.substring(0,10)}}</td>
            <td><input @click="update(index)" type="button" value="修改"><input @click="del(index)" type="button" value="删除"></td>
        </tr>
    </table>

    <div class="list-page"> {{pageInfo.total}} 条
        <a v-for="i in pageInfo.pages" @click.prevent="initData(i)"
           :class="{'current':pageInfo.pageNum==i}"
        >{{i}}</a>
        {{pageInfo.pageNum}}/{{pageInfo.pages}} 页
    </div>
</div>

</body>
</html>

<script>
    var app = new Vue({
        el: "#app",
        //数据
        data: {
            //存放后端的数据
            heatingNumbers: [],
            //存放后端所有省份的数据
            provinces:[],
            //存放后端所有城市的数据
            citys:[],
            //分页数据
            pageInfo: {},
            //显示所有数据表格
            showTab: true,
            //是否显示添加或者修改输入框
            showAdd: false,
            //存放新增加的数据
            curHeatingNumber: {},
            //修改的索引号
            editIndex: -1,
            //供暖号码表的数据(初始值)
            searchHeatingNumber: {
                id: 0,
                /*//动态sql不需要给初始值
                number:'',
                householdIdcard:'',
                householdName:'',
                address:''*/
            },
            //格式判断的初始值(数据)
            error: {
                address: "",
                number: "",
                householdName: "",
                householdIdcard: ""
            }
        },
        //created 创建
        created: function () {
            this.initData(1);
            this.initDataProvince();
            this.initDataCity();
        },
        //方法
        methods: {
            //查询所有的配置的方法(初始化)
            initData: function (pageNum) {
                this.showTab = true;//显示所有数据表格
                this.showAdd = false;//是否显示添加或者修改输入框
                axios.post("http://localhost:8080/manage/heatingNumber?pageNum=" + pageNum, this.searchHeatingNumber)
                    .then(res => {
                        /*res.data.data   res.第一个data代表的是从后台返回的一个整体数据;
                        第二个data代表的是从后台返回的那个整体数据里的一个数据。*/
                        this.heatingNumbers = res.data.data.list;
                        this.pageInfo = res.data.data;

                    });//请求成功
                this.searchHeatingNumber = {id: 0};//清空
            },
            //查询所有省份的方法(初始化)
            initDataProvince: function () {
                axios.get("http://localhost:8080/manage/heatingNumber")
                    .then(res => {
                        /*res.data.data   res.第一个data代表的是从后台返回的一个整体数据;
                        第二个data代表的是从后台返回的那个整体数据里的一个数据。*/
                        this.provinces = res.data.data;
                    });//请求成功

            },
            //查询所有城市的方法(初始化)
            initDataCity: function () {
                axios.get("http://localhost:8080/manage/heatingNumberCity")
                    .then(res => {
                        /*res.data.data   res.第一个data代表的是从后台返回的一个整体数据;
                        第二个data代表的是从后台返回的那个整体数据里的一个数据。*/
                        this.citys = res.data.data;
                    });//请求成功

            },
            //根据省份id查询相对应的城市
            provinces:function(){

            },
            //根据供暖号码进行查询的方法
            search: function () {
                this.searchHeatingNumber.number = document.getElementById("sel").value;
                this.initData(1);

            },
            //根据户主身份证号进行查询的方法
            search1: function () {
                this.searchHeatingNumber.householdIdcard = document.getElementById("sel").value;
                this.initData(1);

            },
            //根据户主名进行查询的方法
            search2: function () {
                this.searchHeatingNumber.householdName = document.getElementById("sel").value;
                this.initData(1);

            },
            //根据供暖号码绑定的地址进行查询的方法
            search3: function () {
                this.searchHeatingNumber.address = document.getElementById("sel").value;
                this.initData(1);

            },
            //添加供暖号码信息的方法
            addHeatingNumber: function () {
                //是否显示添加或者修改输入框
                this.showAdd = true;
                //显示所有数据表格
                this.showTab = false;
            },
            //返回类型功能的方法
            backTab: function () {
                //是否显示添加或者修改输入框
                this.showAdd = false;
                //显示所有数据表格
                this.showTab = true;
                //清空存放新增加的数据
                this.curHeatingNumber = {};
            },
            //提交保存功能的输入框的确定按钮(添加或者修改)的方法
            save: function () {
                //修改功能的输入框的确定按钮
                if (this.curHeatingNumber.id) {
                    //获得当前的编辑对象
                    var curHeatingNumber = JSON.parse(JSON.stringify(this.curHeatingNumber));
                    //splice对数组从某个索引位置的开始;this表示该方法所属的对象
                    this.heatingNumbers.splice(this.editIndex, 1, curHeatingNumber);
                } else//删除功能的输入框的确定按钮
                {
                    //push就是将新数据放入到一个新的list集合里面
                    this.heatingNumbers.push(JSON.parse(JSON.stringify(this.curHeatingNumber)));
                }
                //清空当前编辑对象;{}代表对象
                this.curHeatingNumber = {};
                //不显示输入框  添加或者修改
                this.showAdd = false;
                //修改的索引号,editIndex=-1表示取消编辑状态
                this.editIndex = -1;
            },
            //根据序号对供暖号码表的信息进行修改的方法
            update: function (index) {
                //修改索引号
                this.editIndex = index;
                //显示输入框为true
                this.showAdd = true;
                //不显示所有数据表格
                this.showTab = false;
                //修改当前的编辑对象
                this.curHeatingNumber = JSON.parse(JSON.stringify(this.heatingNumbers[index]));
            },
            //提交保存功能的方法
            save: function () {
                //供暖号码的正则表达式
                var numberFormat = /^[\b0-9]{6,20}$/;
                //户主名的正则表达式
                var householdNameFormat = /^[\u4e00-\u9fa5]{2,50}$/;
                //身份证号码的正则表达式
                var householdIdcardFormat = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
                //保存通过序号对供暖号码表进行修改功能的数据
                if (this.curHeatingNumber.id) {
                    //供暖号码格式验证
                    if (this.curHeatingNumber.number == undefined || this.curHeatingNumber.number == "") {
                        this.error.number = "供暖号码不能为空";
                        //供暖号码输入框获得焦点
                        this.$refs.number.focus();
                        return;
                    } else if (!numberFormat.test(this.curHeatingNumber.number)) {
                        this.error.number = "请输入正确的供暖号码";
                        //供暖号码输入框获得焦点
                        this.$refs.number.focus();
                        return;
                    } else {
                        this.error.number = "";
                    }

                    //户主名格式验证
                    if (this.curHeatingNumber.householdName == undefined || this.curHeatingNumber.householdName == "") {
                        this.error.householdName = "户主名不能为空";
                        //户主名输入框获得焦点
                        this.$refs.householdName.focus();
                        return;
                    } else if (!householdNameFormat.test(this.curHeatingNumber.householdName)) {
                        this.error.householdName = "请输入正确的户主名";
                        //户主名输入框获得焦点
                        this.$refs.householdName.focus();
                        return;
                    } else {
                        this.error.householdName = "";
                    }

                    //身份证号码格式验证
                    if (this.curHeatingNumber.householdIdcard == undefined || this.curHeatingNumber.householdIdcard == "") {
                        this.error.householdIdcard = "身份证号码不能为空";
                        //身份证号码输入框获得焦点
                        this.$refs.householdIdcard.focus();
                        return;
                    } else if (!householdIdcardFormat.test(this.curHeatingNumber.householdIdcard)) {
                        this.error.householdIdcard = "请输入正确的身份证号码";
                        //身份证号码输入框获得焦点
                        this.$refs.householdIdcard.focus();
                        return;
                    } else {
                        this.error.householdIdcard = "";
                    }
                    axios.post("http://localhost:8080/manage/updateHeatingNumber", this.curHeatingNumber)
                        .then(
                            res => {
                                this.backTab();
                                //保存修改的新数据
                                if (!this.curHeatingNumber.id) {
                                    //点击提交按钮,进入点击修改数据的页面
                                    this.initData(this.pageInfo.pageNum);
                                }
                                this.curHeatingNumber = {};
                            });//请求成功

                } else//保存对供暖号码表进行添加功能的数据
                {
                    //供暖号码格式验证
                    if (this.curHeatingNumber.number == undefined || this.curHeatingNumber.number == "") {
                        this.error.number = "供暖号码不能为空";
                        //供暖号码输入框获得焦点
                        this.$refs.number.focus();
                        return;
                    } else if (!numberFormat.test(this.curHeatingNumber.number)) {
                        this.error.number = "请输入正确的供暖号码";
                        //供暖号码输入框获得焦点
                        this.$refs.number.focus();
                        return;
                    } else {
                        this.error.number = "";
                    }

                    //户主名格式验证
                    if (this.curHeatingNumber.householdName == undefined || this.curHeatingNumber.householdName == "") {
                        this.error.householdName = "户主名不能为空";
                        //户主名输入框获得焦点
                        this.$refs.householdName.focus();
                        return;
                    } else if (!householdNameFormat.test(this.curHeatingNumber.householdName)) {
                        this.error.householdName = "请输入正确的户主名";
                        //户主名输入框获得焦点
                        this.$refs.householdName.focus();
                        return;
                    } else {
                        this.error.householdName = "";
                    }

                    //身份证号码格式验证
                    if (this.curHeatingNumber.householdIdcard == undefined || this.curHeatingNumber.householdIdcard == "") {
                        this.error.householdIdcard = "身份证号码不能为空";
                        //身份证号码输入框获得焦点
                        this.$refs.householdIdcard.focus();
                        return;
                    } else if (!householdIdcardFormat.test(this.curHeatingNumber.householdIdcard)) {
                        this.error.householdIdcard = "请输入正确的身份证号码";
                        //身份证号码输入框获得焦点
                        this.$refs.householdIdcard.focus();
                        return;
                    } else {
                        this.error.householdIdcard = "";
                    }

                    axios.post("http://localhost:8080/manage/addHeatingNumber", this.curHeatingNumber)
                        .then(res => {
                            this.backTab();
                            //保存添加的新数据
                            if (!this.curHeatingNumber.id) {
                                this.initData();
                            }
                            //清空存放新增加的数据
                            this.curHeatingNumber = {};
                        });//请求成功
                }

            },
            //根据供暖号码id对供暖号码的信息进行删除的方法
              del:function (index) {
                   axios.post("http://localhost:8080/manage/deleteHeatingNumber/"+this.heatingNumbers[index].id)
                  .then(res=>{
                      //splice对数组从某个索引位置的开始;this表示该方法所属的对象
                      this.heatingNumbers.splice(index,1);
                  })
              }

        }
    });
</script>